import React, { useEffect, useState } from 'react'
import { Table, Button, Popconfirm, message, Tooltip, notification } from 'antd';
import axios from 'axios';
import { DeleteOutlined, EditOutlined, UploadOutlined } from '@ant-design/icons'

export default function NewsDraft(props) {
    // 草稿箱列表数据
    const [draftDataSource, setDraftDataSource] = useState([])
    // 解构用户信息
    const { username } = JSON.parse(localStorage.getItem("token"))

    // 获取草稿箱数据
    useEffect(() => {
        axios.get(`/news?author=${username}&auditState=0&_expand=category`).then(res => {
            const list = res.data
            setDraftDataSource(list)
        }).catch(err => console.log(err))
    }, [username])
    // 列表头
    const columns = [
        {
            title: 'ID',
            dataIndex: 'id',
            render: (id) => {
                return <b>{id}</b>
            }
        },
        {
            title: '新闻标题',
            dataIndex: 'title',
            render: (title, item) => {
                return <a href={`#/news-manage/preview/${item.id}`}>{title}</a>
            }

        },
        {
            title: '作者',
            dataIndex: 'author',
        },
        {
            title: '新闻分类',
            dataIndex: 'category',
            render: (category) => {
                return category.title
            }
        },
        {
            title: '操作',
            render: (item) => {
                return <div>
                    <Popconfirm
                        title="删除草稿"
                        description="是否确认删除草稿？"
                        onConfirm={() => confirm(item)}
                        onCancel={cancel}
                        okText="确认"
                        cancelText="取消"
                    >
                        <Tooltip placement="top" title="删除草稿" mouseLeaveDelay={0}>
                            <Button danger shape="circle" icon={<DeleteOutlined />} style={{ marginRight: '10px' }}></Button>
                        </Tooltip>
                    </Popconfirm>
                    <Tooltip placement="top" title="编辑草稿" mouseLeaveDelay={0}>
                        <Button shape="circle" icon={<EditOutlined />} onClick={() => editDraft(item)} style={{ marginRight: '10px' }}></Button>
                    </Tooltip>
                    <Tooltip placement="top" title="上传审核" mouseLeaveDelay={0}>
                        <Button type="primary" shape="circle" icon={<UploadOutlined />} onClick={() => uploadDraft(item.id)}></Button>
                    </Tooltip>
                </div>
            }
        },
    ];
    // 提示框行为确认
    const confirm = (item) => {
        deleteDraft(item)
        message.success('删除成功');
    };
    // 提示框行为取消
    const cancel = (e) => {
        console.log(e);
        message.error('已取消');
    };
    // 删除草稿
    const deleteDraft = (item) => {
        setDraftDataSource(draftDataSource.filter(data => data.id !== item.id))
        axios.delete(`/news/${item.id}`)
    }
    // 编辑草稿件
    const editDraft = (item) => {
        // console.log(props,'props');
        props.history.push(`/news-manage/update/${item.id}`)
        // props.history.push(`/news-manage/update/${item.id}`)
        // console.log(item);
    }
    // 上传审核
    const uploadDraft = (id) => {
        axios.patch(`/news/${id}`, {
            auditState: 1,
        }).then(res => {
            props.history.push('/audit-manage/list')
            notification.info({
                message: `通知`,
                description: `您可以到审核列表中查看您的新闻`,
                placement: "bottomRight"
            })
        })

        console.log(id);
    }


    return (
        <div>
            <Table dataSource={draftDataSource} columns={columns}
                pagination={{ pageSize: 5 }}
                rowKey={item => item.id}
            />
        </div>
    )
}
